<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图书管理系统</title>
  <!-- 引入Vue3 -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36D399',
            warning: '#FFAB00',
            danger: '#F87272',
            neutral: {
              100: '#F3F4F6',
              200: '#E5E7EB',
              300: '#D1D5DB',
              400: '#9CA3AF',
              500: '#6B7280',
              600: '#4B5563',
              700: '#374151',
              800: '#1F2937',
              900: '#111827',
            }
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .book-card-hover {
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 300ms;
      }
      .book-card-hover:hover {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        transform: translateY(-1px);
      }
      .btn-primary {
        background-color: #165DFF;
        color: white;
        font-weight: 500;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        border-radius: 0.5rem;
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
      }
      .btn-primary:hover {
        background-color: rgba(22, 93, 255, 0.9);
      }
      .btn-secondary {
        background-color: white;
        border-width: 1px;
        border-color: #D1D5DB;
        color: #4B5563;
        font-weight: 500;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        border-radius: 0.5rem;
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
      }
      .btn-secondary:hover {
        background-color: #F3F4F6;
      }
      .btn-danger {
        background-color: #F87272;
        color: white;
        font-weight: 500;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        border-radius: 0.5rem;
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
      }
      .btn-danger:hover {
        background-color: rgba(248, 114, 114, 0.9);
      }
      .form-input {
        width: 100%;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        border-width: 1px;
        border-color: #D1D5DB;
        border-radius: 0.5rem;
        outline: 2px solid transparent;
        outline-offset: 2px;
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
      }
      .form-input:focus {
        box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.25);
        border-color: #165DFF;
      }
      .badge {
        font-size: 0.75rem;
        font-weight: 500;
        padding-left: 0.625rem;
        padding-right: 0.625rem;
        padding-top: 0.125rem;
        padding-bottom: 0.125rem;
        border-radius: 9999px;
      }
    }
  </style>
</head>
<body class="bg-neutral-100 font-inter text-neutral-800 min-h-screen flex flex-col">
  <div id="app" class="flex-grow container mx-auto px-4 py-8">
    <!-- 导航栏组件 -->
    <nav-component></nav-component>
    
    <!-- 主内容区 -->
    <main class="mt-8 flex-grow">
      <router-view></router-view>
    </main>
    
    <!-- 页脚 -->
    <footer-component class="mt-16"></footer-component>
  </div>

  <!-- 引入Vue Router -->
  <script src="https://unpkg.com/vue-router@4/dist/vue-router.global.js"></script>

  <script>
    // 导航栏组件
    const NavComponent = {
      template: `
        <nav class="bg-white shadow-md rounded-lg p-4">
          <div class="flex justify-between items-center">
            <div class="flex items-center space-x-4">
              <i class="fa fa-book text-primary text-2xl"></i>
              <h1 class="text-2xl font-bold text-primary">图书管理系统</h1>
            </div>
            <div class="hidden md:flex space-x-6">
              <router-link to="/" class="text-gray-700 hover:text-primary transition">首页</router-link>
              <router-link to="/books" class="text-gray-700 hover:text-primary transition">图书列表</router-link>
              <router-link to="/add" class="text-gray-700 hover:text-primary transition">添加图书</router-link>
              <router-link to="/about" class="text-gray-700 hover:text-primary transition">关于我们</router-link>
            </div>
            <button class="md:hidden text-gray-700" @click="toggleMenu">
              <i class="fa fa-bars text-xl"></i>
            </button>
          </div>
          <!-- 移动端菜单 -->
          <div v-if="mobileMenuOpen" class="md:hidden mt-4 pt-4 border-t border-neutral-200">
            <router-link to="/" class="block py-2 text-gray-700 hover:text-primary transition">首页</router-link>
            <router-link to="/books" class="block py-2 text-gray-700 hover:text-primary transition">图书列表</router-link>
            <router-link to="/add" class="block py-2 text-gray-700 hover:text-primary transition">添加图书</router-link>
            <router-link to="/about" class="block py-2 text-gray-700 hover:text-primary transition">关于我们</router-link>
          </div>
        </nav>
      `,
      data() {
        return {
          mobileMenuOpen: false
        }
      },
      methods: {
        toggleMenu() {
          this.mobileMenuOpen = !this.mobileMenuOpen
        }
      }
    }

    // 页脚组件
    const FooterComponent = {
      template: `
        <footer class="bg-neutral-800 text-white p-6 rounded-lg">
          <div class="flex flex-col md:flex-row justify-between">
            <div class="mb-4 md:mb-0">
              <div class="flex items-center space-x-2 mb-2">
                <i class="fa fa-book text-primary"></i>
                <h2 class="text-xl font-bold">图书管理系统</h2>
              </div>
              <p class="text-neutral-400">小学期前端应用项目</p>
            </div>
            <div>
              <p class="text-neutral-400">© 2023 图书管理小组. 保留所有权利.</p>
            </div>
          </div>
        </footer>
      `
    }

    // 首页组件
    const HomeComponent = {
      template: `
        <div class="bg-white rounded-lg shadow-md p-8">
          <div class="flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 mb-8 md:mb-0">
              <h2 class="text-[clamp(2rem,5vw,3rem)] font-bold text-neutral-800 mb-4">
                简单高效的<br><span class="text-primary">图书管理系统</span>
              </h2>
              <p class="text-neutral-600 text-lg mb-6">
                基于Vue3开发的现代化图书管理平台，帮助您轻松管理图书资源，提高工作效率。
              </p>
              <div class="flex flex-wrap gap-4">
                <router-link to="/books" class="btn-primary">
                  <i class="fa fa-book mr-2"></i>浏览图书
                </router-link>
                <router-link to="/add" class="btn-secondary">
                  <i class="fa fa-plus mr-2"></i>添加图书
                </router-link>
              </div>
            </div>
            <div class="md:w-1/2 flex justify-center">
              <img src="https://picsum.photos/id/24/600/400" alt="图书馆书架" class="rounded-lg shadow-lg max-w-full h-auto">
            </div>
          </div>
          
          <div class="mt-16">
            <h3 class="text-2xl font-bold text-center mb-8">系统特点</h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
              <div class="bg-neutral-50 p-6 rounded-lg shadow-sm book-card-hover">
                <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                  <i class="fa fa-th-list text-primary text-xl"></i>
                </div>
                <h4 class="text-xl font-bold mb-2">图书管理</h4>
                <p class="text-neutral-600">轻松管理图书信息，包括添加、编辑、删除和查看详情</p>
              </div>
              <div class="bg-neutral-50 p-6 rounded-lg shadow-sm book-card-hover">
                <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                  <i class="fa fa-search text-primary text-xl"></i>
                </div>
                <h4 class="text-xl font-bold mb-2">快速搜索</h4>
                <p class="text-neutral-600">强大的搜索功能，支持按书名、作者、ISBN等多条件筛选</p>
              </div>
              <div class="bg-neutral-50 p-6 rounded-lg shadow-sm book-card-hover">
                <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                  <i class="fa fa-mobile text-primary text-xl"></i>
                </div>
                <h4 class="text-xl font-bold mb-2">响应式设计</h4>
                <p class="text-neutral-600">完美适配各种设备屏幕，从手机到桌面电脑均可流畅使用</p>
              </div>
            </div>
          </div>
        </div>
      `
    }

    // 图书列表组件
    const BooksComponent = {
      template: `
        <div class="bg-white rounded-lg shadow-md p-6">
          <div class="flex flex-col md:flex-row md:items-center justify-between mb-8">
            <h2 class="text-2xl font-bold mb-4 md:mb-0">图书列表</h2>
            <div class="flex flex-col sm:flex-row gap-4">
              <div class="relative">
                <input 
                  type="text" 
                  v-model="searchQuery" 
                  placeholder="搜索图书..." 
                  class="form-input pl-10"
                >
                <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400"></i>
              </div>
              <router-link to="/add" class="btn-primary">
                <i class="fa fa-plus mr-2"></i>添加图书
              </router-link>
            </div>
          </div>
          
          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            <div v-for="book in filteredBooks" :key="book.id" class="book-card-hover bg-white border border-neutral-200 rounded-lg overflow-hidden">
              <div class="h-48 bg-neutral-100 flex items-center justify-center">
                <img 
                  :src="book.coverUrl || 'https://picsum.photos/id/' + (Math.floor(Math.random() * 100) + 1) + '/300/400'" 
                  alt="图书封面" 
                  class="max-h-full max-w-full object-contain"
                >
              </div>
              <div class="p-4">
                <div class="flex justify-between items-start mb-2">
                  <h3 class="font-bold text-lg line-clamp-1">{{ book.title }}</h3>
                  <span 
                    class="badge"
                    :class="book.available ? 'bg-secondary/20 text-secondary' : 'bg-danger/20 text-danger'"
                  >
                    {{ book.available ? '可借阅' : '已借出' }}
                  </span>
                </div>
                <p class="text-neutral-500 text-sm mb-2 line-clamp-1">{{ book.author }}</p>
                <div class="flex items-center text-sm text-neutral-500 mb-3">
                  <i class="fa fa-calendar-o mr-1"></i>
                  <span>{{ book.publishedYear }}</span>
                  <span class="mx-2">•</span>
                  <i class="fa fa-book mr-1"></i>
                  <span>{{ book.category }}</span>
                </div>
                <div class="flex justify-between">
                  <router-link 
                    :to="'/book/' + book.id" 
                    class="text-primary hover:text-primary/80 text-sm font-medium"
                  >
                    查看详情
                  </router-link>
                  <button 
                    @click="toggleAvailability(book)"
                    class="text-xs px-2 py-1 rounded"
                    :class="book.available ? 'bg-danger/10 text-danger hover:bg-danger/20' : 'bg-secondary/10 text-secondary hover:bg-secondary/20'"
                  >
                    {{ book.available ? '借出' : '归还' }}
                  </button>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 空状态 -->
          <div v-if="books.length === 0" class="py-12 text-center">
            <div class="w-16 h-16 mx-auto mb-4 bg-neutral-100 rounded-full flex items-center justify-center">
              <i class="fa fa-book text-neutral-400 text-2xl"></i>
            </div>
            <h3 class="text-xl font-medium text-neutral-600 mb-2">暂无图书</h3>
            <p class="text-neutral-500 mb-6">点击"添加图书"按钮开始创建您的图书库</p>
            <router-link to="/add" class="btn-primary">
              <i class="fa fa-plus mr-2"></i>添加图书
            </router-link>
          </div>
          
          <!-- 搜索无结果 -->
          <div v-if="books.length > 0 && filteredBooks.length === 0" class="py-12 text-center">
            <div class="w-16 h-16 mx-auto mb-4 bg-neutral-100 rounded-full flex items-center justify-center">
              <i class="fa fa-search text-neutral-400 text-2xl"></i>
            </div>
            <h3 class="text-xl font-medium text-neutral-600 mb-2">未找到匹配的图书</h3>
            <p class="text-neutral-500">尝试使用不同的关键词或检查拼写</p>
          </div>
        </div>
      `,
      data() {
        return {
          books: [
            {
              id: 1,
              title: "JavaScript高级程序设计",
              author: "Matt Frisbie",
              publishedYear: "2022",
              category: "编程语言",
              available: true,
              coverUrl: "https://picsum.photos/id/24/300/400"
            },
            {
              id: 2,
              title: "Python数据分析实战",
              author: "Wes McKinney",
              publishedYear: "2021",
              category: "数据科学",
              available: false,
              coverUrl: "https://picsum.photos/id/42/300/400"
            },
            {
              id: 3,
              title: "HTML5与CSS3权威指南",
              author: "Thomas A. Powell",
              publishedYear: "2023",
              category: "前端开发",
              available: true,
              coverUrl: "https://picsum.photos/id/20/300/400"
            },
            {
              id: 4,
              title: "Vue.js权威指南",
              author: "Evan You",
              publishedYear: "2022",
              category: "前端开发",
              available: true,
              coverUrl: "https://picsum.photos/id/21/300/400"
            },
            {
              id: 5,
              title: "算法导论",
              author: "Thomas H. Cormen",
              publishedYear: "2020",
              category: "计算机科学",
              available: false,
              coverUrl: "https://picsum.photos/id/22/300/400"
            },
            {
              id: 6,
              title: "设计模式：可复用面向对象软件的基础",
              author: "Erich Gamma",
              publishedYear: "2019",
              category: "软件工程",
              available: true,
              coverUrl: "https://picsum.photos/id/23/300/400"
            },
            {
              id: 7,
              title: "人工智能：现代方法",
              author: "Stuart Russell",
              publishedYear: "2022",
              category: "人工智能",
              available: true,
              coverUrl: "https://picsum.photos/id/24/300/400"
            },
            {
              id: 8,
              title: "计算机网络：自顶向下方法",
              author: "Andrew S. Tanenbaum",
              publishedYear: "2021",
              category: "计算机网络",
              available: false,
              coverUrl: "https://picsum.photos/id/25/300/400"
            }
          ],
          searchQuery: ''
        }
      },
      computed: {
        filteredBooks() {
          if (!this.searchQuery.trim()) {
            return this.books;
          }
          
          const query = this.searchQuery.toLowerCase().trim();
          return this.books.filter(book => 
            book.title.toLowerCase().includes(query) || 
            book.author.toLowerCase().includes(query) ||
            book.category.toLowerCase().includes(query)
          );
        }
      },
      methods: {
        toggleAvailability(book) {
          book.available = !book.available;
          // 这里可以添加实际的API调用逻辑
        }
      }
    }

    // 添加图书组件
    const AddBookComponent = {
      template: `
        <div class="bg-white rounded-lg shadow-md p-6">
          <h2 class="text-2xl font-bold mb-6">添加新图书</h2>
          
          <form @submit.prevent="addBook" class="space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label for="title" class="block text-sm font-medium text-neutral-700 mb-1">书名</label>
                <input 
                  type="text" 
                  id="title" 
                  v-model="newBook.title" 
                  class="form-input"
                  required
                >
              </div>
              <div>
                <label for="author" class="block text-sm font-medium text-neutral-700 mb-1">作者</label>
                <input 
                  type="text" 
                  id="author" 
                  v-model="newBook.author" 
                  class="form-input"
                  required
                >
              </div>
              <div>
                <label for="publishedYear" class="block text-sm font-medium text-neutral-700 mb-1">出版年份</label>
                <input 
                  type="number" 
                  id="publishedYear" 
                  v-model="newBook.publishedYear" 
                  class="form-input"
                  min="1900"
                  max="2099"
                  required
                >
              </div>
              <div>
                <label for="category" class="block text-sm font-medium text-neutral-700 mb-1">分类</label>
                <select 
                  id="category" 
                  v-model="newBook.category" 
                  class="form-input"
                  required
                >
                  <option value="">请选择分类</option>
                  <option value="前端开发">前端开发</option>
                  <option value="后端开发">后端开发</option>
                  <option value="数据科学">数据科学</option>
                  <option value="人工智能">人工智能</option>
                  <option value="计算机网络">计算机网络</option>
                  <option value="软件工程">软件工程</option>
                  <option value="编程语言">编程语言</option>
                </select>
              </div>
              <div>
                <label for="coverUrl" class="block text-sm font-medium text-neutral-700 mb-1">封面URL</label>
                <input 
                  type="url" 
                  id="coverUrl" 
                  v-model="newBook.coverUrl" 
                  class="form-input"
                  placeholder="可选，输入图片URL"
                >
              </div>
              <div>
                <label for="available" class="block text-sm font-medium text-neutral-700 mb-1">是否可借阅</label>
                <div class="flex items-center">
                  <input 
                    type="checkbox" 
                    id="available" 
                    v-model="newBook.available" 
                    class="w-4 h-4 text-primary focus:ring-primary border-neutral-300 rounded"
                  >
                  <label for="available" class="ml-2 text-sm text-neutral-700">可借阅</label>
                </div>
              </div>
            </div>
            
            <div>
              <label for="description" class="block text-sm font-medium text-neutral-700 mb-1">图书描述</label>
              <textarea 
                id="description" 
                v-model="newBook.description" 
                rows="4" 
                class="form-input"
                placeholder="输入图书描述（可选）"
              ></textarea>
            </div>
            
            <div class="flex justify-end space-x-4">
              <button type="button" @click="resetForm" class="btn-secondary">
                重置
              </button>
              <button type="submit" class="btn-primary">
                <i class="fa fa-plus mr-2"></i>添加图书
              </button>
            </div>
          </form>
        </div>
      `,
      data() {
        return {
          newBook: {
            title: '',
            author: '',
            publishedYear: '',
            category: '',
            coverUrl: '',
            available: true,
            description: ''
          }
        }
      },
      methods: {
        addBook() {
          // 这里可以添加实际的API调用逻辑
          
          // 模拟添加图书成功
          alert('图书添加成功！');
          
          // 重置表单
          this.resetForm();
          
          // 导航回图书列表页
          this.$router.push('/books');
        },
        resetForm() {
          this.newBook = {
            title: '',
            author: '',
            publishedYear: '',
            category: '',
            coverUrl: '',
            available: true,
            description: ''
          };
        }
      }
    }

    // 图书详情组件
    const BookDetailComponent = {
      template: `
        <div class="bg-white rounded-lg shadow-md p-6">
          <div class="flex justify-between items-start mb-6">
            <h2 class="text-2xl font-bold">图书详情</h2>
            <router-link to="/books" class="text-neutral-500 hover:text-neutral-700 transition">
              <i class="fa fa-arrow-left mr-1"></i> 返回列表
            </router-link>
          </div>
          
          <div v-if="book" class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="md:col-span-1">
              <div class="bg-neutral-100 rounded-lg p-4 flex items-center justify-center">
                <img 
                  :src="book.coverUrl || 'https://picsum.photos/id/' + (Math.floor(Math.random() * 100) + 1) + '/300/400'" 
                  alt="图书封面" 
                  class="max-w-full max-h-96 object-contain"
                >
              </div>
            </div>
            
            <div class="md:col-span-2 space-y-4">
              <div>
                <h3 class="text-xl font-bold mb-1">{{ book.title }}</h3>
                <p class="text-neutral-600 mb-3">{{ book.author }}</p>
                <span 
                  class="badge inline-block mb-4"
                  :class="book.available ? 'bg-secondary/20 text-secondary' : 'bg-danger/20 text-danger'"
                >
                  {{ book.available ? '可借阅' : '已借出' }}
                </span>
              </div>
              
              <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <p class="text-sm text-neutral-500">出版年份</p>
                  <p>{{ book.publishedYear }}</p>
                </div>
                <div>
                  <p class="text-sm text-neutral-500">分类</p>
                  <p>{{ book.category }}</p>
                </div>
                <div>
                  <p class="text-sm text-neutral-500">ID</p>
                  <p>{{ book.id }}</p>
                </div>
              </div>
              
              <div>
                <p class="text-sm text-neutral-500 mb-1">图书描述</p>
                <p class="text-neutral-700 whitespace-pre-line">
                  {{ book.description || '暂无描述' }}
                </p>
              </div>
              
              <div class="flex flex-wrap gap-4 pt-4">
                <button 
                  @click="toggleAvailability"
                  class="btn-primary"
                  :class="book.available ? 'bg-danger hover:bg-danger/90' : 'bg-secondary hover:bg-secondary/90'"
                >
                  <i class="fa fa-exchange mr-2"></i>{{ book.available ? '借出此书' : '归还此书' }}
                </button>
                <button class="btn-secondary">
                  <i class="fa fa-edit mr-2"></i>编辑图书
                </button>
              </div>
            </div>
          </div>
          
          <!-- 加载状态 -->
          <div v-else class="py-12 text-center">
            <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
            <p class="mt-4 text-neutral-600">加载中...</p>
          </div>
        </div>
      `,
      data() {
        return {
          book: null
        }
      },
      mounted() {
        // 模拟API请求延迟
        setTimeout(() => {
          // 这里应该根据ID从API获取图书详情
          const bookId = parseInt(this.$route.params.id);
          this.book = this.$parent.books.find(book => book.id === bookId);
          
          if (!this.book) {
            // 图书不存在，导航回列表页
            this.$router.push('/books');
          }
        }, 500);
      },
      methods: {
        toggleAvailability() {
          if (this.book) {
            this.book.available = !this.book.available;
            // 这里可以添加实际的API调用逻辑
          }
        }
      }
    }

    // 关于我们组件
    const AboutComponent = {
      template: `
        <div class="bg-white rounded-lg shadow-md p-6">
          <h2 class="text-2xl font-bold mb-6 text-center">关于我们</h2>
          
          <div class="max-w-3xl mx-auto">
            <p class="text-neutral-700 mb-6">
              本图书管理系统是小学期前端应用开发项目的成果，由四人小组共同开发完成。
              项目旨在实践HTML、CSS、JavaScript以及Vue3框架的应用，打造一个功能完善、界面友好的图书管理平台。
            </p>
            
            <h3 class="text-xl font-bold mb-4">项目目标</h3>
            <ul class="list-disc pl-5 mb-6 space-y-2">
              <li class="text-neutral-700">实现完整的图书管理功能，包括添加、查看、搜索等操作</li>
              <li class="text-neutral-700">设计美观、易用的用户界面，提供良好的用户体验</li>
              <li class="text-neutral-700">应用Vue3框架的核心概念，如组件化、响应式数据等</li>
              <li class="text-neutral-700">学习并使用现代前端工具和技术栈</li>
            </ul>
            
            <h3 class="text-xl font-bold mb-4">小组成员</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6 mb-8">
              <div class="text-center">
                <div class="w-24 h-24 bg-neutral-100 rounded-full mx-auto mb-3 flex items-center justify-center overflow-hidden">
                  <img src="https://picsum.photos/id/64/100/100" alt="成员照片" class="w-full h-full object-cover">
                </div>
                <h4 class="font-medium">张三</h4>
                <p class="text-sm text-neutral-500">前端开发</p>
              </div>
              <div class="text-center">
                <div class="w-24 h-24 bg-neutral-100 rounded-full mx-auto mb-3 flex items-center justify-center overflow-hidden">
                  <img src="https://picsum.photos/id/65/100/100" alt="成员照片" class="w-full h-full object-cover">
                </div>
                <h4 class="font-medium">李四</h4>
                <p class="text-sm text-neutral-500">UI设计</p>
              </div>
              <div class="text-center">
                <div class="w-24 h-24 bg-neutral-100 rounded-full mx-auto mb-3 flex items-center justify-center overflow-hidden">
                  <img src="https://picsum.photos/id/66/100/100" alt="成员照片" class="w-full h-full object-cover">
                </div>
                <h4 class="font-medium">王五</h4>
                <p class="text-sm text-neutral-500">后端开发</p>
              </div>
              <div class="text-center">
                <div class="w-24 h-24 bg-neutral-100 rounded-full mx-auto mb-3 flex items-center justify-center overflow-hidden">
                  <img src="https://picsum.photos/id/67/100/100" alt="成员照片" class="w-full h-full object-cover">
                </div>
                <h4 class="font-medium">赵六</h4>
                <p class="text-sm text-neutral-500">测试与文档</p>
              </div>
            </div>
            
            <h3 class="text-xl font-bold mb-4">技术栈</h3>
            <div class="flex flex-wrap gap-3 mb-6">
              <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">HTML5</span>
              <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">CSS3</span>
              <span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm">JavaScript</span>
              <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm">Vue3</span>
              <span class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm">Tailwind CSS</span>
              <span class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">Font Awesome</span>
            </div>
            
            <p class="text-neutral-700">
              感谢您使用我们的图书管理系统！如果您有任何建议或问题，请随时联系我们。
            </p>
          </div>
        </div>
      `
    }

    // 路由配置
    const routes = [
      { path: '/', component: HomeComponent },
      { path: '/books', component: BooksComponent },
      { path: '/add', component: AddBookComponent },
      { path: '/book/:id', component: BookDetailComponent },
      { path: '/about', component: AboutComponent },
      { path: '/:pathMatch(.*)*', redirect: '/' }
    ]

    // 创建路由实例
    const router = VueRouter.createRouter({
      history: VueRouter.createWebHashHistory(),
      routes
    })

    // 创建Vue实例
    const { createApp } = Vue
    const app = createApp({})
    
    // 注册组件
    app.component('nav-component', NavComponent)
    app.component('footer-component', FooterComponent)
    
    // 使用路由
    app.use(router)
    
    // 挂载应用
    app.mount('#app')
  </script>
</body>
</html>